<!--
 * @Descripttion: 
 * @version: 
 * @Author: yuanliutech
 * @Date: 2024-07-19 10:07:16
 * @LastEditors: yuanliutech@lwj
 * @LastEditTime: 2024-09-14 15:16:07
-->
<template>
  <div>
    <el-dialog
      title="选择维保技工"
      :visible.sync="innerVisible"
      width="750px"
      :before-close="closeAddDialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-transfer
        v-model="value"
        :data="dataList"
        :titles="['待选择维修技工', '已选择维修技工']"
        :props="{
          key: 'userId',
          label: 'username',
        }"
      ></el-transfer>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="addSubmit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["dataList", "userIdList"],
  mixins: [],
  data() {
    return {
      innerVisible: false,
      // data: [],
      value: [],
    };
  },
  watch: {
    innerVisible(e) {
      if (e) {
        this.value = this.userIdList || [];
        // console.log(this.value);
        // console.log(this.dataList);
      }
    },
  },
  computed: {},
  methods: {
    // 点击新增
    addSubmit() {
      this.$emit("clickList", this.value);
      this.closeAddDialog();
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.innerVisible = false;
    },
  },
  mounted() {},
  deactivated() {
    this.closeAddDialog();
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../common.less");

.el-transfer {
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .el-transfer-panel {
  width: 240px;
}
</style>
